<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>002-实例-生命周期.html</title>
</head>
<body>
	<div id="app">
		<p ref="p1">{{message}}</p>
	</div>
</body>
<script src="js/vue.js"></script>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			message:'say hi'
		},
		beforeCreate(){
			console.log('beforeCreate')
			console.log('this.#el',this.$el)
			console.log('this.#refs.p',this.$refs.p1)
			console.log('this.message',this.message)
		},
		created(){
			console.log('created')
			console.log('this.#el',this.$el)
			console.log('this.#refs.p',this.$refs.p1)
			console.log('this.message',this.message)
		},
		beforeMount(){
			console.log('beforeMount')
			console.log('this.#el',this.$el)
			console.log('this.#refs.p',this.$refs.p1)
			console.log('this.message',this.message)
		},
		mounted(){
			console.log('mounted')
			console.log('this.#el',this.$el)
			console.log('this.#refs.p',this.$refs.p1)
			console.log('this.message',this.message)
		},
		beforeUpdate(){
			console.log('beforeUpdate')
		},
		updated(){
			console.log('updated')
		},
		beforeDestroy(){
			console.log('beforeDestroy')
		},
		destroyed(){
			console.log('destroyed')
		},
	})
</script>
</html>